var app = new Vue({
	el:"#app",
	data:function() {
		return {
			title:"Hello Vue",
			tableData:null,
			currentPage:1,
			pageSize:20,
			total:0,
			tableHeight:(document.documentElement.clientHeight-110),
			contextPath:"",
			showList:true,
			dialogTableVisible:false,
			dialogTitle:'新增',
			fields:[{
				prop:"rid",
				label:"rid"
			},{
				prop:"name",
				label:"姓名"
			},{
				prop:"phone",
				label:"手机"
			}],
			form: {
	          name: '',
	          region: '',
	          date1: '',
	          date2: '',
	          delivery: false,
	          type: [],
	          resource: '',
	          desc: ''
	        },
	        multipleSelection:[]
		}
	},
	methods:{
		handleCurrentChange:function(val) {
			this.currentPage = val;
			this.getList();
		},
		handleSizeChange:function(val) {
			this.pageSize = val;
			this.getList();
		},
		onSubmit:function() {
			
		},
		//新增数据
		addForm:function() {
			//显示弹出框
			this.dialogTableVisible = true;
			this.dialogTitle = "新增";
			//在下次 DOM 更新循环结束之后执行延迟回调
			this.$nextTick(function(){
				//重置表单项
				this.$refs.form.resetFields();
			});
		},
		//删除多条列表项
		deleteItems:function() {
			if (this.multipleSelection.length == 0) {
				this.$alert("至少选择一条记录", "提示",{
					type:"warning"
				});
			} else {
				this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		          this.$message({
		            type: 'success',
		            message: '删除成功!',
		            duration:'1000'
		          });
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除',
		            duration:'1000'
		          });          
		        });
			}
		},
		//编辑数据
		editItem:function(id) {
			//显示弹出框
			this.dialogTableVisible = true;
			this.dialogTitle = "编辑";
			console.info(id);
		},
		//删除单条列表项
		deleteItem:function(id) {
			this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		          this.$message({
		            type: 'success',
		            message: '删除成功!',
		            duration:'1000'
		          });
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除',
		            duration:'1000'
		          });          
		        });
		},
		//表单取消提交操作
		cancelForm:function() {
			this.dialogTableVisible = false;
		},
		//列表选中行发生改变时
		handleSelectionChange:function(val) {
			console.info(val);
			this.multipleSelection = val;
		},
		//根据当前页和大小获得分页列表数据
		getList:function() {
			let that = this;
			axios.get(this.contextPath + "/template/list/" + this.currentPage + "/" + this.pageSize)
				.then(function(response){
					console.info(response);
					that.total = response.data.total;
					that.tableData = response.data.data;
				})
				.catch(function(response){
					console.info(response);
				});
		}
	},
	mounted:function() {
		this.contextPath = this.$refs.contextPath.value;
		this.getList();
	}
});
